<template>
    <div class="stock">
        <div class="search-content pl-15 pr-15">
            <a-form layout="inline" small>
                <a-form-item label="分类名称">
                    <a-input v-model="params.categoryName" placeholder="请输入分类名称"></a-input>
                </a-form-item>
                <a-form-item label="产品名称">
                    <a-input v-model="params.productName" placeholder="请输入产品名称"></a-input>
                </a-form-item>
                <a-form-item label="属性值">
                    <a-input v-model="params.param" placeholder="请输入属性值"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="tableReload">查询</a-button>
                </a-form-item>
            </a-form>
        </div>
        <div>
            <p-remote-vxe-table
                    ref="remoteTable"
                    :data-fun="dataFun"
                    @afterLoad="afterLoad"
                    @afterLoadErr="afterLoadErr"
                    :params="params">
                <template slot-scope="{tablePage, data, loading, handlePageChange, sortChangeEvent}" :params="params">
                    <vxe-grid
                            border
                            resizable
                            auto-resize
                            sync-resize
                            size="mini"
                            :height="tableHeight"
                            :loading="loading"
                            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
                            :pager-config="tablePage"
                            :columns="columns"
                            :sortConfig="{
                                remote: true,
                                trigger: 'cell',
                            }"
                            highlight-hover-row
                            highlight-current-row
                            highlight-hover-column
                            highlight-current-column
                            @sort-change="sortChangeEvent"
                            @page-change="handlePageChange"
                            :data="data">
                    </vxe-grid>
                </template>
            </p-remote-vxe-table>
        </div>
    </div>
</template>

<script>
    let defaultColumns = [
        // 对应自定义插槽的名称
        { type: 'seq', fixed: 'left', title: '序号', width: 60, noColumnsSet: true, resizable: false },
        { title: '分类名称', minWidth: 150, align: 'center', field: 'categoryName' },
        { title: '产品名称', minWidth: 150, align: 'center', field: 'productName' },
        { title: '属性值', minWidth: 120, align: 'center', field: 'param' },
        { title: '库存总数', minWidth: 120, align: 'center', field: 'stockCount' },
    ];
    export default {
        data () {
            return {
                dataFun: this.$api.wms.listbystock,
                params: {
                    pageNum: 1,
                    pageSize: 20,
                    keywords: '',
                    categoryName: '',
                    param: '',
                    productName: '',
                },
                columns: JSON.parse(JSON.stringify(defaultColumns)),
                loadingSearch: false,
            };
        },
        methods: {
            afterLoad () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            afterLoadErr () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            tableReload () {
                this.$refs['remoteTable'].reload(this.params);
            },
        }
    };
</script>

<style scoped lang="scss">

</style>
